<template id="meal">
  <div>
    <el-input style="width: 25%;" v-model="mc" placeholder="请输入名称"></el-input>
        &nbsp;&nbsp;
        <el-button style="width: 15%;" @click="queryAll" type="primary">查询</el-button>
        <el-button style="width: 15%;" @click="kk=true"  type="primary">添加</el-button>
        <el-table :data="list">
        <el-table-column prop="id" label="编号" v-if="false">
        </el-table-column>
        <el-table-column prop="bm" label="编码">
        </el-table-column>
        <el-table-column prop="mc" label="套餐名称">
        </el-table-column>
        <el-table-column prop="mealprice" label="套餐价格">
        </el-table-column>
        <el-table-column prop="sex" label="适用性别">
            <template slot-scope="scope">
              {{ scope.row.sex==0?"不限"
                :scope.row.sex==1?"男":"女"
               }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="适用年龄">
            <template slot-scope="scope">
                <span>
                    {{ scope.row.minage }}-{{ scope.row.maxage }}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="mealintroduce" label="套餐介绍">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="attention" label="注意事项">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary"  icon="el-icon-edit" @click="queryId(scope.row.id),up=true"  circle></el-button>
            <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗">
            <el-button type="danger" slot="reference" icon="el-icon-delete" circle></el-button>
          </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[3, 5, 7, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <!--添加-->
    <el-dialog
    title="添加"
    :visible.sync="kk"
    width="50%"
    center>
    <el-form :model="meal" status-icon  ref="meal" label-width="100px" class="demo-ruleForm">
        <el-tabs v-model="tj" type="card" >
            <el-tab-pane label="用户管理" name="yhgl">
                套餐名称:<el-input v-model="meal.mc" style="width: 40%;"/>
                        &nbsp;&nbsp;
                
                适用性别:<el-select v-model="meal.sex" style="width:40%;">
                            <el-option label="不限" value="0"></el-option>
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select><br>
                        <h1></h1>
                年龄下限:<el-input v-model="meal.minage" style="width: 40%;"/>
                &nbsp;&nbsp;
                年龄上限:<el-input v-model="meal.maxage" style="width:40%;"/><br>
                <h1></h1>
                套餐价格:<el-input v-model="meal.mealprice" style="width: 40%;"></el-input>
                &nbsp;&nbsp;
                套餐介绍:<el-input v-model="meal.mealintroduce" style="width: 40%;"></el-input>
                <h1></h1>
                套餐备注:<el-input v-model="meal.remark" style="width: 40%;"></el-input>
                &nbsp;&nbsp;
                注意事项:<el-input v-model="meal.attention" style="width: 40%;"></el-input><br>
                <h1></h1>
                套餐图片: <el-upload action="/tomcat/Z_addMeal/add" ref="upload" name="pictureFile"
                            multiple :on-success="upsuccess" list-type="picture-card" 
                            :auto-upload="false" :data="meal">
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                        <h1></h1>
            </el-tab-pane>

            <el-tab-pane label="检查项" name="second">
              <el-table 
                  ref="multipleTable"
                  :data="che"
                  tooltip-effect="dark"
                  style="width: 100%"
                  >
                  <el-table-column type="selection" label="id" >
                     <template slot-scope="scope">
                      <input type="checkbox" @click="chckeds($event,scope.row.id)">
                     </template>
                  </el-table-column>
                  <el-table-column prop="bh" label="检查项目编号">
                  </el-table-column>
                  <el-table-column prop="itemname" label="检查项目名称">
                  </el-table-column>
                  <el-table-column prop="item" label="项目介绍">
                  </el-table-column>
                  
                  <el-table-column prop="id" label="编号" v-if="false">
                  
                  </el-table-column>
              </el-table>

              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Page4"
                :page-sizes="[3, 5, 7, 10]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-tab-pane>
        </el-tabs>
    <el-button @click="reset('meal'),kk = false">取 消</el-button>
    <el-button type="primary" @click="kk = false,add()" >确 定</el-button>
  </el-form>
  </el-dialog>

<!-- 修改 -->
  <el-dialog
    title="修改"
    :visible.sync="up"
    width="50%"
    center>
    <el-form :model="meals" status-icon  ref="meals" label-width="100px" class="demo-ruleForm">
        <el-tabs v-model="xg"  type="card" >
            <el-tab-pane label="用户管理" name="gl">
                        <inupt v-model="meals.id" type="hidde"/>
                套餐名称:<el-input v-model="meals.mc" style="width: 40%;"/>
                        &nbsp;&nbsp;
                适用性别:<el-select v-model="meals.sex" style="width:40%;">
                            <el-option label="不限" value="0"></el-option>
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select><br>
                        <h1></h1>
                年龄下限:<el-input v-model="meals.minage" style="width: 40%;"/>
                &nbsp;&nbsp;
                年龄上限:<el-input v-model="meals.maxage" style="width:40%;"/><br>
                <h1></h1>
                套餐价格:<el-input v-model="meals.mealprice" style="width: 40%;"></el-input>
                &nbsp;&nbsp;
                套餐介绍:<el-input v-model="meals.mealintroduce" style="width: 40%;"></el-input>
                <h1></h1>
                套餐备注:<el-input v-model="meals.remark" style="width: 40%;"></el-input>
                &nbsp;&nbsp;
                注意事项:<el-input v-model="meals.attention" style="width: 40%;"></el-input><br>
                <h1></h1>
                套餐图片:<el-upload
                          action="https://jsonplaceholder.typicode.com/posts/"
                          list-type="picture-card"
                          :on-preview="handlePictureCardPreview"
                          :on-remove="handleRemove">
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                          <img width="100%"  alt="">
                        </el-dialog>
                        <h1></h1>
            </el-tab-pane>

            <el-tab-pane label="检查项" name="second">
              <el-table 
                  ref="multipleTable"
                  :data="che"
                  tooltip-effect="dark"
                  style="width: 100%"
                  >
                  <el-table-column type="selection" label="id" >
                     <template slot-scope="scope">
                      <input type="checkbox" name="che"  :value="scope.row.id" @click="chckeds($event,scope.row.id)">
                     </template>
                  </el-table-column>
                  <el-table-column prop="id" label="编号" v-if="false">
                  </el-table-column>
                  <el-table-column prop="bh" label="检查项目编号">
                  </el-table-column>
                  <el-table-column prop="itemname" label="检查项目名称">
                  </el-table-column>
                  <el-table-column prop="item" label="项目介绍">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                    <el-popconfirm @confirm="delGroup(scope.row.id,meals.id)" title="这是一段内容确定删除吗">
                      <el-button type="danger" slot="reference" icon="el-icon-delete" circle></el-button>
                    </el-popconfirm>
                  </template>
                  </el-table-column>
                  
              </el-table>

              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Page4"
                :page-sizes="[3, 5, 7, 10]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-tab-pane>
        </el-tabs>
    <el-button @click="reset('meal'),up = false">取 消</el-button>
    <el-button type="primary" @click="up = false,MealUp()" >确 定</el-button>
  </el-form>
  </el-dialog>

     
  </div>
</template>

<script>
export default {
    data(){
        return{
            xg:'gl',
            tj:'yhgl',
            mc:"",
            che:[],
            list:[],
            ches:[],
            total:10,
            Page4:1,
            size:4,
            currentPage4:1,
            pageSize:4,
            up:false,
            kk:false,
            cc:null,
            meal:{mc:"",sex:"",mealprice:"",mealintroduce:"",maxage:"",minage:"",imgmeal:"",remark:"",attention:""},
            meals:{id:"",mc:"",sex:"",mealprice:"",mealintroduce:"",maxage:"",minage:"",imgmeal:"",remark:"",attention:""}
        }
    },
    methods:{
      del(id){
        alert(id)
        this.axios.post("/tomcat/Z_delMeal",{id:id}).then(s=>{
          if(s.data>0){
            this.$notify({
                    title: '成功',
                    message: '这是一条移除成功的提示消息',
                    type: 'success',
                    position:"bottom-left"
                });
          }
        })
      },
      queryChe(){
        this.axios.post("/tomcat/Z_queryChe",{num:this.size,page:this.Page4})
            .then(s=>{
                this.total=s.data.total
                this.che=s.data.rows
            })
      },
      delGroup(gid,id){
        this.axios.post("/tomcat/Z_delG",{mealid:id,itemid:gid}).then(s=>{
          if(s.data>0){
            this.$notify({
                    title: '成功',
                    message: '这是一条移除成功的提示消息',
                    type: 'success',
                    position:"bottom-left"
                });
          }
            this.queryId(id);
        })
      },
      MealUp(){
        console.log(this.ches)
        this.axios.post("/tomcat/Z_MealUp",{setmeal:this.meals,che:this.ches}).then(s=>{
          if(s.data>=1){
              this.$notify({
                    title: '成功',
                    message: '这是一条修改成功的提示消息',
                    type: 'success',
                    position:"bottom-left"
                  });
            }
            this.queryAll();
        })
        this.ches=[]
      },
      queryId(id){
        this.axios.post("/tomcat/Z_mealById",{id:id}).then(s=>{
          this.meals=s.data
        })
        this.axios.post("/tomcat/Z_selectBy",{id:id}).then(s=>{
        console.log(s.data)
           let check=document.getElementsByName("che");
           for(var a=0;a<check.length;a++){
                check[a].checked=false
                check[a].disabled=false
            }
           if(s.data.length>0){
            for(var i=0;i<check.length;i++){

            for(var j=0;j<s.data.length;j++){
                 if(check[i].value==s.data[j].itemid){
                      check[i].checked=true
                      check[i].disabled=true
                      break;
                 }else{
                    check[i].checked=false
                    check[i].disabled=false

                 }
              }
            }
           }
        })
        
      },
      queryAll(){
        this.axios.post("/tomcat/Z_queryMeal",{page:this.currentPage4,num:this.pageSize,mc:this.mc}).
        then(s=>{
          this.total=s.data.total
          this.list=s.data.rows
        })
      },
      add(){
          this.$refs.upload.submit();
          this.axios.post("/tomcat/Z_addMeal",{setmeal:this.meal,che:this.ches}).then(rsp=>{
            if(rsp.data>=1){
              this.$notify({
                    title: '成功',
                    message: '这是一条添加成功的提示消息',
                    type: 'success',
                    position:"bottom-left"
                  });
            }
            this.queryAll();
          })
          this.ches=[]
      },
      chckeds(obj,id){
       if(obj.target.checked){
          this.ches.push({id:id})
       }else{
        let ids= this.ches.findIndex(item=>{
            if(item.id==id){
                return true
            }
          })
          this.ches.splice(ids,1)
       }
       console.log(this.ches)
      },
      handleSizeChange(val) {
            this.pageSize=val
            this.queryAll();
            },
      handleCurrentChange(val) {
            this.currentPage4=val
            this.queryAll();
            },
            reset(){
              this.meal={}
            }
            
    },
    created(){
        this.queryAll();
        this.queryChe();
    }
}
</script>

<style>

</style>